<!--
 * @Author: your name
 * @Date: 2021-05-08 10:06:29
 * @LastEditTime: 2021-07-16 16:01:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \dolphin-data-center-front-end\src\pages\components\projectDetailTabs\tab1.vue
-->
<template>
  <div>
    <div class="info">
      <div class="btns">
        <a-space v-if="infoIndex == 0" :size="8">
          <a-button @click="onCancel">取消</a-button>
          <a-button type="primary" @click="onSave">保存</a-button>
        </a-space>
        <a-button type="primary" @click="onEdit(0)" v-else>编辑</a-button>
      </div>
      <a-descriptions title="基本信息" layout="vertical" v-if="infoIndex == 0">
        <a-descriptions-item v-for="(info, index) in basicInfoList" :key="info.txt">
          <span slot="label">{{info.txt}} <span style="color:red" v-if="index==6||index==7">*</span> </span>
          <a-select v-if="index == 2" v-model="info.value" style="width: 328px">
            <a-select-option value="WAIBAO">外包</a-select-option>
            <a-select-option value="PAIQIAN">派遣</a-select-option>
            <a-select-option value="RENSHIDAILI">人事代理</a-select-option>
          </a-select>
          <a-select show-search :filter-option="false" v-else-if="index == 3" :value="info.value" style="width: 328px" allow-clear @search="onSearchDept" @change="onChangeDept">
            <a-select-option v-for="dept in deptList" :key="dept">
              {{ dept }}
            </a-select-option>
          </a-select>
          <a-date-picker style="width: 328px" v-else-if="info.txt == '合同开始日期' || info.txt == '合同终止日期'" :default-value="info.value?moment(info.value, 'YYYY/MM/DD'):''" :value="info.value?moment(info.value, 'YYYY/MM/DD'):''" allow-clear @change="((date,dateString) => {onDateChange(date,dateString,info.txt)})" />
          <a-input v-else :disabled="info.txt == '企业名称' || info.txt == '签约主体' || info.txt == '项目名称'|| info.txt == '运营公司'" v-model="info.value" :max-length="info.txt == '服务费'?6:100" :addon-after="info.txt == '服务费' ? '元/人/月' : ''" allow-clear style="width: 328px" />
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions class="auto-desc" title="基本信息" v-else>
        <a-descriptions-item v-for="(info, index) in basicInfoList" :key="info.txt" :label="info.txt">
          <span v-if="index == 2">{{ info.value == 'WAIBAO' ? '外包' : info.value == 'PAIQIAN' ? '派遣' : info.value == 'RENSHIDAILI' ? '人事代理' : '' }}</span>
          <span v-else>{{ info.value }}</span>
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <div class="line"></div>
    <div class="info">
      <div class="btns">
        <a-space v-if="infoIndex == 1" :size="8">
          <a-button @click="onCancel">取消</a-button>
          <a-button type="primary" @click="onSave">保存</a-button>
        </a-space>
        <a-button type="primary" @click="onEdit(1)" v-else>编辑</a-button>
      </div>
      <a-descriptions layout="vertical" title="财务信息" v-if="infoIndex == 1">
        <a-descriptions-item v-for="(info, index) in financialInfoList" :key="info.txt" :label="info.txt">
          <a-radio-group :value="info.value ? true : false" v-if="index == 10" @change="onRadioChange">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
          <a-select v-else-if="index == 8 || index == 9 || index == 11 || index == 12" v-model="info.value" :disabled="(index == 11 && !financialInfoList[10].value) || index == 0 || index == 1" placeholder="选择日期" style="width:320px">
            <a-select-option :value="i" v-for="i in 28" :key="i">每月{{ i }}日</a-select-option>
          </a-select>
          <a-input v-model="info.value" allow-clear style="width: 328px" v-else />
        </a-descriptions-item>
      </a-descriptions>
      <a-descriptions class="auto-desc" title="财务信息" v-else>
        <a-descriptions-item v-for="(info, index) in financialInfoList" :key="info.txt" :label="info.txt">
          <span v-if="index == 10">{{ info.value ? '是' : '否' }}</span>
          <span v-else-if="index == 8 || index == 9  ||index == 11|| index == 12">{{info.value?'每月'+info.value+'号':''}}</span>
          <span v-else>{{ info.value }}</span>
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { getSearchDept } from '@/services/project';
export default {
  name: 'tab1',
  props: ['basicInfoList', 'financialInfoList', 'initBasicInfoList', 'advanceDay', 'initFinancialInfoList', 'editSuccess'],
  data () {
    return {
      infoIndex: null,
      dataType: null,
      deptList: []
    };
  },
  watch: {
    editSuccess: {
      handler (val) {
        if (val) {
          this.infoIndex = null;
        }
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    moment,
    onEdit (i) {
      this.infoIndex = i;
      const dfsk = this.financialInfoList.filter(val => val.txt == '垫付收款日')
      if (!dfsk.length) {
        this.financialInfoList.splice(11, 0, {
          txt: '垫付收款日',
          value: this.advanceDay,
        });
      }
    },
    onCancel () {
      this.$emit('info-type', this.infoIndex);
      this.infoIndex = null;
    },
    onSave () {
      if (this.infoIndex == 0) {
        this.$emit('basicInfo', this.basicInfoList);
      } else {
        if (!this.financialInfoList[10].value) {
          this.financialInfoList.splice(11, 1)
        }
        this.$emit('financialInfo', this.financialInfoList);
      }
    },
    onDateChange (date, dateString, type) {
      this.$emit('dateChange', { dateString, type });
    },
    onSearchDept (value) {
      if (value.length >= 2) {
        this.getSearchDept({ deptName: value });
      }
    },
    onChangeDept (value) {
      this.$emit('changeDept', value);
    },
    onRadioChange (e) {
      this.$emit('changeAdvanceIf', e.target.value);
    },
    /**
     * @description: 搜索部门列表
     * @param {*}
     * @return {*}
     */
    getSearchDept (params) {
      getSearchDept(params).then(res => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.deptList = data;
        } else {
          this.$message.error(msg);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.line {
  height: 1px;
  width: 100%;
  background: #f0f0f0;
  margin: 12px 0 22px 0;
}
.info {
  position: relative;
  .btns {
    text-align: right;
    position: absolute;
    right: 0;
  }
}
.auto-desc {
  /deep/tr {
    display: flex;
    display: -webkit-flex;
  }
  /deep/td {
    display: flex;
    display: -webkit-flex;
    width: 33.334%;
    overflow: hidden;
    & > span:nth-of-type(1) {
      flex-shrink: 0;
    }
    .ant-descriptions-item-content {
      max-width: 255px;
    }
  }
}
</style>
